<template>
  <div>
    <div>pinia引入与使用</div>
    <div>store.school：{{ schoolName }}</div>
    <div>store.teacher：{{ schoolTeacher }}</div>
    <div>store.totalNum：{{ normalStore.totalNum }}</div>
    <div><button @click="changeTotalNum">++</button></div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useNormalStore } from "@/store/normal"
import { storeToRefs } from 'pinia';

// normalStore本身就是reactive对象，里面所有的ref会被自动解包，不用加.value
// 例如normalStore.totalNum，即使totalNum被pinia分装成响应式数据，也不用加.value
let normalStore = useNormalStore()
function changeTotalNum() {
  // 第一种修改方式
  normalStore.totalNum += 1
  // 第二种修改方式
  // normalStore.$patch({
  //   totalNum: 10,
  //   schoolName: "金堡中学"
  // })

  // 通过调用store的action来实现
  // normalStore.changeTotalNum(10)
}

// store实例的解构赋值
let { schoolName, schoolTeacher } = storeToRefs(normalStore)
// 可以用let schoolName = toRef(normalStore, 'schoolName')单独拿出一个属性来做响应式
// 但是别用let { schoolName } = toRefs(normalStore)，toRefs会让actions，getters里面的方法都变成响应式，浪费性能。
normalStore.$subscribe
</script>

<style lang="scss" scoped>

</style>